<template class="login">
  <div>
    <form action="" @submit.prevent="onSubmit" class="login-form">
      <h1 class="login-title">后台管理系统</h1>
      <input
        type="text"
        v-model="username"
        class="login-text"
        placeholder="用户名"
      />
      <input
        type="password"
        v-model="password"
        class="login-text"
        placeholder="密码"
      />
      <button class="btn">登录</button>
      <dv-decoration-10 style="width:90%;height:5px;" />
      <div>
        <span class="login-span">还没有账号？</span
        ><router-link class="login-enroll" to="/enroll">免费注册</router-link>
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";
import utils from "@/utils/utils";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit() {
      const username = this.username;
      const password = this.password;
      axios
        .post("http://localhost:8080/api/login", { username, password })
        .then((response) => {
          if (response.data.code === 0) {
            localStorage.setItem("user", username);
            localStorage.setItem("pwd", password);
            localStorage.setItem("token", response.data.Token);
            utils.setCookie("user", username);
            utils.setCookie("pwd", password);
            utils.setCookie("token", response.data.Token);
            this.$router.push("/index");
            console.log(0);
          } else if (response.data.code === 1) {
            alert("用户名或密码不对请注册账号或重新登录");
            router.push("/enroll");
            console.log(1);
          } else if (response.data.code === 3) {
            console.log(3);
            alert("该账号已经登录");
            this.username = "";
            this.password = "";
            router.push("/");
          }
        });
    },
  },
};
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #373b44, #4286f4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-form {
  display: flex;
  width: 350px;
  height: 380px;
  background-color: aliceblue;
  flex-direction: column;
  border-radius: 3px;
  align-items: center;
}
.login-title {
  margin: 50px 0;
  font-family: "Courier New", Courier, monospace;
  color: rgb(75, 72, 72);
}
.login-text {
  width: 200px;
  height: 32px;
  margin: 0 0 10px 0;
  padding-left: 10px;
  border: 1px solid #ccc;
  outline-color: #4286f4;
  border-radius: 2px;
  caret-color: #4286f4;
}
.login-text::placeholder {
  padding-left: 5px;
  color: #ccc;
}
.login-span {
  font-size: 15px;
  color: #ccc;
}
.login-enroll {
  text-decoration: none;
}
.btn {
  width: 210px;
  height: 32px;
  background-color: #4286f4;
  border-radius: 2px;
  border: none;
  color: aliceblue;
  margin-bottom: 10px;
}
.btn:active {
  background-color: #6a9ef3;
}
</style>